<template>
    <div class="card-items">
        <div class="head-part">
            <div class="title">
                <img src="@/assets/van-img.png" alt="" />
                <span>{{ dataItem.title }}</span>
            </div>
            <van-popover v-model:show="showPopover" v-if="dataItem.title != '营业厅'" :actions="actions" @select="onSelect">
                <template #reference>
                    <div class="qs-text">
                        {{ selectName }} <van-icon name="arrow-down" />
                    </div>
                </template>
            </van-popover>
        </div>
        <div class="tab-btn">
            <span v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="tabIndex == index ? 'btn-select' : 'btn-unselect'">{{ item.name }}</span>
        </div>
        <!-- 需要替换成linbarChart -->
        <lineEcharts :chartObj="chartObj" :cindex="dataItem.index" />
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import lineEcharts from "@/components/lineBarEcharts.vue"
export default {
    props: ["itemObj"],
    components: {
        lineEcharts
    },
    setup(props) {
        const state = reactive({
            tabList: [
                { name: "质差机顶盒更换完成率(累计)" },
                { name: "互联网电视订购营销费用争议万投比" }
            ],
            tabIndex: 0,
            showPopover: false,
            dataItem: props.itemObj,
            selectName: "全省趋势",
            actions: [{ text: "全省趋势" }, { text: "分公司排名" }],
            chartObj: {}
        })
        //一级tab切换
        function tabClick(val) {
            state.tabIndex = val
        }
        const onSelect = (action) => (state.selectName = action.text)
        onMounted(() => {
            state.chartObj = state.dataItem.chartObj
        })
        return {
            ...toRefs(state),
            tabClick,
            onSelect
        }
    }
}
</script>
<style lang="scss" scoped>
.card-items {
    margin: 10px;
    width: calc(100% - 20px);
    height: 274px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 2px 10px;
    margin-bottom: 10px;
    .head-part {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .qs-text {
            padding: 0 15px;
            line-height: 24px;
            color: #666666;
            margin-right: 10px;
            font-size: 12px;
            background: #ffffff;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
    }
    .title {
        width: 50%;
        display: flex;
        align-items: center;
        span {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
        }
    }
    .tab-btn {
        width: calc(100% - 8px);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 8px 0 0 8px;
        overflow-x: auto;

        .btn-select {
            padding: 6px 13px;
            background: linear-gradient(285deg, #fe6800 0%, #ff9900 100%);
            border-radius: 12px;
            color: #ffffff;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
        .btn-unselect {
            padding: 6px 13px;
            background: #f3f3f3;
            border-radius: 12px;
            color: #333333;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
    }
    .tab-btn::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .desc-panel {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .left-desc {
            font-size: 14px;
            .text1 {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                margin-right: 6px;
            }
            .text2 {
                font-size: 21px;
                font-weight: bold;
                color: #333333;
                margin-right: 6px;
            }
        }
        .right-desc {
            padding: 0 10px;
            height: 24px;
            line-height: 24px;
            margin-right: 10px;
            background: #fff0dc;
            color: #333333;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>
